<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task2-18</title>
    <style>
        body,html {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        .container {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background-color: #cde6c7;
            text-align: center;
            padding: 100px 0;
            box-sizing: border-box;
        }
        .inputNum {
            width: 200px;
            height: 30px;
            border: 0;
            vertical-align: middle;
            font-size: 16px;
        }
        .inputConfirm {
            width: 50px;
            color: #fff;
            font-size: 20px;
            line-height: 30px;
            padding: 5px;
            margin-right: 10px;
            background-color: #65c294;
            vertical-align: middle;
            cursor: pointer;
        }
        .display {
            margin: 30px;
            height: 400px;
            position: relative;
            display: flex;
            align-items: flex-end; 
        }
        .display p {
            font-size: 10px;
            background-color: #65c294;
            width: 15px;
            padding:5px;
            margin: 5px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="container">
        <input type="text" class="inputNum" id="inputNum" placeholder="  请输入数字"><span class="inputConfirm" onclick="handleFun('leftIn')">左侧入</span><span class="inputConfirm" onclick="handleFun('rightIn')">右侧入</span><span class="inputConfirm" onclick="handleFun('leftOut')">左侧出</span><span class="inputConfirm" onclick="handleFun('rightOut')">右侧出</span><br /><span class="inputConfirm" onclick="sort()">冒泡排序</span>
        <div class="display" id="display">
        </div>
    </div>
    <script>
    var handleFun = function(func){
        var inputNum=document.getElementById('inputNum').value;
        var $display=document.getElementById('display');
        var leftPosition=$display.children.length*40;
        if(!isNaN(inputNum)){
            var $num=document.createElement("p");
            $num.innerHTML=inputNum;
            $num.style.height=inputNum+"px";
            $num.addEventListener('click',function(){
                //触发click代码
                this.parentNode.removeChild(this);
            });
            switch(func){
                case "leftIn":if(verify(inputNum)){$display.insertBefore($num,$display.firstElementChild);break;}else{break;};
                case "rightIn":if(verify(inputNum)){$display.appendChild($num);break;}else{break;};
                case "leftOut":try{$display.removeChild($display.firstElementChild);} catch(e){
                        alert("没有子节点可以继续删除，粗线异常咯哦小伙砸。");
                    };break;
                case "rightOut":try{$display.removeChild($display.lastElementChild);} catch(e){
                    alert("没有子节点可以继续删除，粗线异常咯哦小伙砸。");
                };break;
            }
        } else {
            alert("你输入的不是数字，请输入数字。");
        }
    }
    var verify = function(num){
        if(num>100||num<10) {
                alert("输入的数字必须在10~100之间");
            } else {
                return 1;
            }
    }
    var sort = function(){
        var $display=document.getElementById('display');
        var arrP=$display.getElementsByTagName('p');
        var arr=[];
        var $fragement=document.createDocumentFragment();
        for(var i=0;i<arrP.length;i++){
            arr[i]=parseInt(arrP[i].innerHTML);
        }
        var sortArr=bubbleSort(arr);
        // 重新绘制展示区
        $display.innerHTML="";
        for(var i=0;i<sortArr.length;i++){
            var $num=document.createElement("p");
            $num.innerHTML=sortArr[i];
            $num.style.height=sortArr[i]+"px";
            $fragement.appendChild($num);
        }
        $display.appendChild($fragement);

    }
    var bubbleSort = function(arr){
        var temp;
        for (var i = 0;i<arr.length;i++) {
            for(var j=0;j<i;j++)
            { 
                if(parseInt(arr[j])>parseInt(arr[i]))
                {
                    temp=arr[j];
                    arr[j]=arr[i];
                    arr[i]=temp;
                }
            }
        }
        return arr;
    }
    </script>
</body>
</html>